<template>
  <DialogTpl v-bind="$props">
    <template #dialogContent>
      <div class="mb-40 text">是否确认操作
        <span class="name">{{ dialogConfig.data.label }}</span>
        远程{{ isOpen ? '开闸' : '关闸' }}？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirmDuty">
          确 定
        </el-button>
        <el-button @click="handleCancelDuty">
          取 消
        </el-button>
      </div>
    </template>
  </DialogTpl>
</template>

<script>
import Duty from '@/services/duty.js'
export default {
  props: {
    dialogConfig: {
      type: Object,
      default() {
        return {
          show: false,
          destroy: false,
          title: '远程开闸',
          type: 'open',
          top: '15vh',
          width: '360px',
          data: {}
        }
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    isOpen() {
      const { type } = this.dialogConfig
      return type === 'open'
    },
    isClose() {
      const { type } = this.dialogConfig
      return type === 'close'
    }
  },
  watch: {
    'dialogConfig.show': {
      handler(value) {
        if (value) this.$parent.colseAllElementFn()
        else this.$parent.openAllElementFn()
      }, immediate: true
    }
  },
  methods: {
    handleConfirmDuty() {
      const that = this
      const data = this.dialogConfig.data
      Duty.operateOpenOrCloseGate({ parkId: data.parkId, gateId: data.value, type: that.isOpen ? 1 : 0 }).then(res => {
        this.$message.success(that.isOpen ? data.label + '开闸成功' : data.label + '关闸成功')
        this.dialogConfig.show = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleCancelDuty() {
      this.dialogConfig.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #222222;

  .name {
    color: #3680FF
  }
}
</style>
